<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            background-color: #000;
            font-size: 0;
        }
        img{
            filter: alpha(opacity=50);
            opacity: .5;
        }
    </style>
</head>
<body>
    <h1>font-style</h1>
    <p style="font-style: italic">font-style: italic</p>
    <p style="font-style: oblique">font-style: oblique</p>
    <hr>

    <h1>font-variant</h1>
    <p style="font-variant: normal">font-variant: normal</p>
    <p style="font-variant: small-caps">font-variant: small-caps</p>
    <hr>

    <h1>font-weight</h1>
    <p style="font-weight: normal">您好-font-weight: normal</p>
    <p style="font-weight: bolder">您好-font-weight: bolder</p>
    <p style="font-weight: lighter">您好-font-weight: lighter</p>
    <p style="font-weight: 400">您好-font-weight: 400</p>
    <p style="font-weight: 600">您好-font-weight: 600</p>
    <hr>

    <h1>font-size</h1>
    <p style="font-size: xx-large">h1-您好-font-size: xx-large</p>
    <p style="font-size: x-large">h2-您好-font-size: x-large</p>
    <p style="font-size: large">h3-您好-font-size: xx-large</p>
    <p style="font-size: medium">h4-您好-font-size: medium</p>
    <p style="font-size: small">h5-您好-font-size: small</p>
    <p style="font-size: x-small">您好-font-size: x-small</p>
    <p style="font-size: xx-small">h6-您好-font-size: xx-small</p>
</body>
</html>